<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <div class="flex w-full bg-[#213743] items-center mb-4">
      <div
        class="max-w-[1200px] px-4 xl:px-0 w-full m-auto flex justify-between items-center h-[60px] xl:h-[115px]"
      >
        <h1 class="text-[1rem] xl:text-[1.6rem] font-bold">
          {{ $t("page.navbar.Recent") }}
        </h1>
        <img
          class="w-[12rem] xl:w-[24rem]"
          src="../../assets/gams/group-banner-default.png"
          alt=""
        />
      </div>
    </div>
    <div
      class="w-full max-w-[1200px] px-4 xl:px-0 m-auto p-4 mb-4 items-center"
    >
      <Search />
      <gameBox :games="dataArr" />
      <!-- <p class="text-[#b1bad3] text-center">
        {{
          $t("page.casino.showtext1") +
          showtotal +
          $t("page.casino.showtext2") +
          games.length +
          $t("page.casino.showtext3")
        }}
      </p> -->
      <div
        v-if="showNextPage"
        @click="nextPage"
        class="w-[120px] m-auto mt-2 text-center bg-[#2f4553] text-white hover:bg-[#557086] px-4 py-2 rounded cursor-pointer"
      >
        {{ $t("page.casino.more") }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, defineAsyncComponent } from "vue";
import { gameRecordList } from "../../api/casion.js";
import { mainAct } from "../../store/activeda";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const Search = defineAsyncComponent(() =>
  import("../../components/search/index.vue")
);
const gameBox = defineAsyncComponent(() =>
  import("../../components/gameSwiper/gameBox.vue")
);
const main2 = mainAct();
const dataArr = ref([]);
const currentPage = ref(1);
const totalPages = ref(1);
const showNextPage = ref(false);

const nextPage = () => {
  if (currentPage.value <= totalPages.value) {
    currentPage.value++;
    getData();
  }
};

const getData = () => {
  gameRecordList({
    page: currentPage.value,
    page_size: 13
  }).then(res => {
    if (res.errno == 0) {
      dataArr.value.push(...res.data.list);
      totalPages.value = Math.ceil(res.data.total / 13);
      if (res.data.total > res.data.page * res.data.page_size) {
        showNextPage.value = true;
      } else {
        showNextPage.value = false;
      }
    }
  });
};
onMounted(() => {
  dataArr.value = [];
  getData();
});
</script>
<style scoped lang="less">
@media (max-width: 600px) {
  .gameBox {
    grid-gap: 10px 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;

    .item {
      width: 28vw !important;
      max-width: unset;
      min-width: unset;
    }
    .game_loading_div {
      width: 28vw !important;
      height: 36vw !important;
    }
    .star {
      display: block !important;
    }
    .mb {
      opacity: 1 !important;
    }
  }
}

.gameBox {
  background-color: #1a2c38;
  display: grid;
  grid-gap: 2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  .hover-img {
    will-change: transform;
    transition: 0.3s;
  }
  .item .game_loading_div {
    width: 157px;
    color: #fff;
    height: 216px;
    cursor: pointer;
    background-color: #213743;
    text-align: center;
    line-height: 216px;
    border-radius: 4px;
  }
  .star {
    display: none;
  }
  .mb {
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(48, 48, 48, 0.9) 100%
    );
  }

  .item:hover .hover-img {
    transform: translateY(-4%);
    .star {
      display: block;
      z-index: 12;
    }
    .mb {
      opacity: 1;
      transition-duration: 1s;
      transition-property: opacity;
      z-index: 11;
    }
  }
  .greenpoint {
    animation: svelte-tgp09d-pulse 1s infinite ease-out;
  }
  @keyframes svelte-tgp09d-pulse {
    0% {
      box-shadow: 0 0 #00e70166;
    }
    30% {
      box-shadow: 0 0 2px 2px #00e70166;
    }
    70% {
      box-shadow: 0 0 2px 2px #00e70166;
    }
    100% {
      box-shadow: 0 0 #00e70166;
    }
  }
}
</style>
